import React, { useState,useEffect } from 'react'
import { NavBar } from 'antd-mobile'
import "./Home.less"
import Banner from './component/Banner/Banner';
import Cate from "./component/Cate/Cate"
import Groupon from "./component/Groupon/Groupon"
import { SearchBar } from 'antd-mobile';
import { reqGetgroupon, reqGetindexgoods, reqGetnew } from "../../http/api"
import a from "../../assets/img/1.png"
import b from "../../assets/img/2.png"
import c from "../../assets/img/3.png"
import d from "../../assets/img/4.png"
import e from "../../assets/img/5.png"

export default function Home(props) {
    // 初始化
    const [getnewList,setGetnewList] = useState([])
    const [getGroupon,setGetGroUpon] = useState([])

    //   3.1 商品数据
  const [goods, setGoods] = useState([]);
  const [n, setN] = useState(0);

    useEffect(() => {
       reqGetnew().then(res=>{
           if(res.data.code===200){
               setGetnewList(res.data.list)
        }
       })
    },[])

    useEffect(()=>{
        reqGetgroupon().then(res=>{
            if(res.data.code===200){
                setGetGroUpon(res.data.list)
            }
        })
    },[])
     // 3.2. 请求商品数据
     useEffect(() => {
        reqGetindexgoods().then((res) => {
        if (res.data.code === 200) {
          setGoods(res.data.list);
        }
      });
    }, []);
   
    return (
        <div className="home">
           <NavBar>首页</NavBar>
        <SearchBar placeholder="Search" maxLength={8} onSubmit={() => this.props.history.push("/search")} />

        <div className="new">
            新人专享
        </div>
        {/* 新人专享 */}
        {getnewList.length > 0 ? 
        <Banner {...props} getnewList={getnewList}></Banner> : null}

        {/* 优惠券 */}
        <div className="coupon" onClick={()=>props.history.push("/coupon")}>
            优惠券
        </div>

        
        <div className="lie">
            <div className="nav">
                <img src={a} alt="" />
                <span>限时秒杀</span>
            </div>
            <div className="nav">
                <img src={b} alt="" />
                <span>畅销商品</span>
            </div>
            <div className="nav">
                <img src={c} alt="" />
                <span>品质大牌</span>
            </div>
            <div className="nav">
                <img src={d} alt="" />
                <span>小U自营</span>
            </div>
            <div className="nav">
                <img src={e} alt="" />
                <span>积分商城</span>
            </div>
           
        </div>
        {/* 万人团 */}
        {getGroupon.length > 0 ? <Groupon {...props} getGroupon={getGroupon}></Groupon> : null}


        {/* 3.3 分类 */}
        {goods.length > 0 ? (
        <Cate showList={goods[n].content} n={n} setN={(e) => setN(e)}></Cate>
      ) : null}

    </div>
    )
}

